<%@ page contentType="text/html;charset=iso-8859-1" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title><spring:message code="WEBTITLE"/></title>
    <%@ include file="../include/style.jsp" %>
    <%@ include file="../include/script.jsp" %>
    
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/viewModel/productsAndMarkets.viewmodel.js"></script>
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/models/market-model.js"></script>
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/models/product-model.js"></script>
    <script>var keyword = "<%=request.getAttribute("keyword")%>"; </script>
</head>
<body>

	<%@ include file="../include/top-public.jsp" %>

	<div class="container">
		
		<div id="products-container">
			<div class="row">
				<div class="col-sm-12 col-md-12 col-lg-12"><h3 class="title product"><i class="icon-tag"></i> <spring:message code="PRODUCTS"/></h3></div>
			</div>
			<div class="row">
				<div data-bind="template: { name: 'product-template', foreach: products, afterRender: showProducts }"></div>
				<script type="text/html" id="product-template">
					<%@ include file="../templates/product-template.jsp" %>
				</script>
				<div class="col-md-12" style="display: none;" data-bind="visible: products().length == 0">
					<h3>No se encontraron productos en la busqueda</h3>			
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-6" data-bind="with: pager">
					<%@ include file="../templates/pager.jsp" %>
				</div>
			</div>
		</div>
		
		<div id="markets-container">
			<div class="row">
				<div class="col-sm-12 col-md-12 col-lg-12"><h3 class="title store"><i class="ico-shop"></i> <spring:message code="MARKETS"/></h3></div>
			</div>
		
			<div class="row">
				<div data-bind="template: { name: 'market-template', foreach: markets, afterRender: showMarkets }"></div>
				<script type="text/html" id="market-template">
					<%@ include file="../templates/market-template.jsp" %>
				</script>
				<div class="col-md-12" style="display: none;" data-bind="visible: markets().length == 0">
					<h3>No se encontraron tiendas en la busqueda</h3>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-6" data-bind="with: pager">
					<%@ include file="../templates/pager.jsp" %>
				</div>		
			</div>
		</div>
		
		<%@ include file="../include/footer.jsp" %>

	</div>
</body>
</html>